<template>
	<view class="container">
		<view class="wechatapp">
			<!-- <image class="header" src="/images/wechatapp.png"></image> -->
			<view class="header">
				<open-data class="" type="userAvatarUrl"></open-data>
			</view>
		</view>
		<view class="auth-title">申请获取以下权限</view>
		<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
		<view class="login-btn">
			<button class="btn-normal" open-type="getPhoneNumber" @getphonenumber="onLogin" lang="zh_CN">授权登录</button>
		</view>
		<!-- <view class="no-login-btn">
			<button class="btn-normal" @click="onNotLogin">暂不登录</button>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {

			};
		},
		onLoad() {
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor:'#000000'
			});
		},
		methods: {
			...mapMutations(['setRole']),
			/**
			 * 授权登录
			 */
			async onLogin(e) {
				let _this = this;
				//登录
				const [, loginInfo] = await uni.login({
					provider: "weixin"
				});
				if (loginInfo) {
					const {
						code
					} = await loginInfo;
					_this.getPhoneNumber(e, function(e) {
						const params = {
							loginCode: code,
							phoneCode: e.detail.code
						};
						console.log(params);
						
						_this.$API.third_login(params).then(res => {
							uni.setStorageSync('noLogin', true);
							uni.setStorageSync('token', res.token);
							uni.setStorageSync('member', JSON.stringify(res.member));
							_this.setRole('user');
							 uni.setStorageSync('type', 'user')
							uni.switchTab({
								url:'../plat-menu/index'
							})
							//获取当前页面栈的实例
							let pages = getCurrentPages();
							//获取当前页面
							let currentPage = pages[pages.length-2];
							let url = currentPage.route;
							//如果当前处于首页，则...
							console.log(url)
							
						});
					});
				}
			},
			/**
			 * 获取手机号
			 * @param {*} e 
			 * @param {*} callback 
			 */
			getPhoneNumber(e, callback) {
				var that = this;
				console.log("getPhoneNumberok", e.detail);
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					callback && callback(e)
				}
			},
			/**
			 * 暂不登录
			 */
			onNotLogin() {
				let _this = this;
				// 跳转回原页面
				uni.switchTab({
					url:'/pages/plat-menu/index'
				})
				uni.setStorageSync('noLogin', false)
			},

			/**
			 * 授权成功 跳转回原页面
			 */
			onNavigateBack() {
				wx.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/login/login.js.wxss */
	page {
		background: #fff;
		font-size: 32rpx;
	}

	.container {
		padding: 0 60rpx;
	}

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;
	}

	.wechatapp .header {
		width: 190rpx;
		height: 190rpx;
		border: 2px solid #fff;
		margin: 0rpx auto 0;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		//padding: 0 20rpx;
	}

	.login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);
		border-radius: 46rpx;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}

	.no-login-btn {
		margin-top: 32rpx;
		// padding: 0 20rpx;
	}

	.no-login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: #dfdfdf;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}
</style>